<template>
  <div ref="myChartsRef" :style="{ flex: 1 }" :option="option"></div>
</template>
<script setup lang="ts">
  import { ECharts, EChartsOption, init } from 'echarts'
  import { ref, watch, onMounted, onBeforeUnmount, PropType } from 'vue'
  let myChart: ECharts
  const myChartsRef = ref<HTMLDivElement>()
  const props = defineProps({
    option: {
      type: Object,
      default: () => {
        return {}
      },
    },
  })
  watch(
    () => props.option,
    () => {
      initChart()
    },
    {
      deep: true,
    },
  )

  onMounted(() => {
    initChart()
  })

  const initChart = (): void => {
    if (myChart !== undefined) {
      myChart.dispose()
    }
    myChart = init(myChartsRef.value as HTMLDivElement)
    // 拿到option配置项，渲染echarts
    myChart?.setOption(props.option, true)
  }
</script>
